<template>
  <v-list  class="light-green lighten-5  pt-5">
    <v-list-item-group>
      <my-relation :relation="fan" @queryRelation="queryUserIndex" v-for="fan in fans" :key="fan.userId"></my-relation>
      <el-empty v-show="fans.length == 0" description="该用户暂无粉丝"></el-empty>
    </v-list-item-group>
  </v-list>
</template>

<script>
import MyRelation from '../views/MyRelation.vue'

export default {
  name: 'MyUserFans',
  components: {MyRelation},
  data: ()=>({
    fans: []
  }),
  computed: {
    user(){
      return this.$store.state.user
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const uid = to.query.id;
      // 根据路由id，查询并设置用户页的信息
      vm.queryUserFans(uid)
    })
  },
  methods:{
    doQueryUserFans(url, config){
      this.$axios.get(url, config).then(rep=>{
        const res = rep.data
        if(res.status != 200){
          this.$message.error(res.msg)
          return;
        }
        this.fans = res.data
      }).catch(Error=>{
          console.log(Error)
      })
    },
    queryUserFans(uid){
      const userId = this.user.userId
      const token = this.user.token

      if(userId && token){
        this.doQueryUserFans('/api/user/fans/u', {
          params:{uid, userId},
          headers: {token }
        })
      }else{
        this.doQueryUserFans('/api/user/fans', {params: {userId: uid}})
      }
    },
    queryUserIndex(){
      this.$parent.queryUserIndex(this.user.userId)
    }
  }
}
</script>

<style scoped>

</style>